<template>
	<div class="loading">
		<div class="loader-inner ball-rotate">
          <div></div>
        </div>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:"appLoading"
	}
</script>
<style lang="less" scoped>
	@import '../assets/css/variables.less';
	.loading{
		width:100%;
        padding-top:150px;
	}
   .ball-rotate {
    position: relative; 
    width:15px;
    height:15px;
    margin:0 auto;
    }
  .ball-rotate > div {
    background-color: @yellow;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: relative; }
    .ball-rotate > div:first-child {
      -webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
              animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite; }
    .ball-rotate > div:before, .ball-rotate > div:after {
      background-color: @yellow;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin: 2px;
      content: "";
      position: absolute;
      opacity: 0.8; }
    .ball-rotate > div:before {
      top: 0px;
      left: -28px; }
    .ball-rotate > div:after {
      top: 0px;
      left: 25px; }
    @keyframes rotate {
      0% {
        -webkit-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1); }

      50% {
        -webkit-transform: rotate(180deg) scale(0.6);
                transform: rotate(180deg) scale(0.6); }

      100% {
        -webkit-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1); } }
</style>